/* 全局css变量 */
$--color-primary: #409eff;

/* 应用背景色 */
$--app-background-color: #bfdbff;

/* 应用字体颜色 */
$--app-font-color: #000000;
$--app-disabled-font-color: #333333;

/* 页签组件 */
.el-tabs {
  --el-tabs-header-height: 24px;
  --el-font-size-base: 12px;
  padding: 0;
  width: 100%;

  .el-tabs__header {
    margin: 0;
    
    .el-tabs__item {
      padding: 0 8px !important;
      color: #154a93;
      background-color: #caddf6;
    }

    .el-tabs__nav {
      border: none;

      .is-top { 
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }
  
      .is-bottom {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
      }
    }

    .is-active {
      background-color: #fdfdfe;
    }
  }

  .el-tabs__header.is-top {
    border-bottom: #fdfdfe solid 1px;
  }

  .el-tabs__header.is-bottom {
    margin-top: 0;
    border: none;
    border-top: #fdfdfe solid 1px;
  }

  .el-tabs__content {
    background-color: #FFFFFF;
    border: #6593cf solid 1px;

    .resource-setting-toolbar, .page-toolbar {
      line-height: 24px;
      background-color: #dcebff;
    }
  }
}

/* 画布区域 */
.page-designer {
  background-color: #daeaff;

  .page-widget-cantainer {
    background-color: #ffffff;
  }
}

/* 组件设计弹出框 */
.widget-edit-dialog {
  --el-dialog-width: 1400px;
  --el-dialog-margin-top: 20px;
  --el-dialog-title-font-size: 14px;
  --el-dialog-padding-primary: 8px;
  background-color: $--app-background-color;

  .el-dialog__header {

    .el-dialog__headerbtn {
      width: 32px;
      height: 32px;
    }
  }
  
  .widget-edit-container {
    .widget-designer {
      background-color: #daeaff;

      .widget-canvas-cantainer {
        background-color: #ffffff;
      }
    }
  }
}

.code-editor-dialog {
  --el-dialog-width: 1400px;
  --el-dialog-margin-top: 4vh;

  .el-dialog__body {
    padding: 6px 10px 6px 10px;
  }
}

// 隐藏拖拽时put的默认样式
.ghost {
  display: none !important;
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.el-select.event-select {
  .el-select__wrapper {
    padding: 2px 6px;
  }
}

/* 滚动条样式 begin */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  width: 8px;
  background: rgba(#101f1c, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(#101f1c, 0.35);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(#101f1c, 0.85);
}

* {
  //Firefox浏览器滚动条样式
  scrollbar-color: #e5e5e5 #f7f7f9; //滚动条轨道颜色、滚动条滑块的颜色
  scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失
  user-select: none;
}

.resize-line {
  opacity: 0;
}

.resize-line-horizontal {
  width: 8px;
  height: 100%;
  cursor: ew-resize;
}

.resize-line-vertical {
  width: 100%;
  height: 8px;
  cursor: ns-resize;
}

.el-popover.context-menu-popover {
  min-width: 80px;
  padding: 0;
  --el-dropdown-menu-box-shadow: var(--el-box-shadow-light);
  --el-dropdown-menuItem-hover-fill: var(--el-color-primary-light-9);
  --el-dropdown-menuItem-hover-color: var(--el-color-primary);
  --el-dropdown-menu-index: 10;
  box-shadow: var(--el-dropdown-menu-box-shadow);

  .context-menu-list {
    position: relative;
    top: 0;
    left: 0;
    z-index: var(--el-dropdown-menu-index);
    padding: 5px 0;
    margin: 0;
    background-color: var(--el-bg-color-overlay);
    border: none;
    outline: none;
    border-radius: var(--el-border-radius-base);
    box-shadow: none;
    list-style: none;
    padding: 0;
    margin: 0;

    .context-menu-item {
      display: flex;
      align-items: center;
      white-space: nowrap;
      list-style: none;
      line-height: 22px;
      padding: 5px 16px;
      margin: 0;
      font-size: var(--el-font-size-base);
      color: var(--el-text-color-regular);
      cursor: pointer;
      outline: none;

      &:hover {
        background-color: var(--el-dropdown-menuItem-hover-fill);
        color: var(--el-dropdown-menuItem-hover-color);
      }

      &.disabled {
        color: var(--el-text-color-disabled);
        cursor: not-allowed;
      }
    }
  }

  .el-popper__arrow {
    left: 8px !important;
  }
}

.widget-canvas {
  position: absolute;
  overflow: hidden;
  font-family: 'font1' !important;

  .field-editor {
    overflow: hidden;

    &.slider-field-editor {
      overflow: unset;
    }
  }

  .widget-list-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
}